<template>
  <i class="icon-more" @click="show = true">
    <transition name="shortcut">
      <div v-if="show" id="ShortcutBox">
        <div class="shortcut-mask" @click.stop="show = false"></div>
        <ul class="shortcut-box">
          <li><nuxt-link to="/"><span class="home"></span><strong>首页</strong></nuxt-link></li>
          <li><nuxt-link to="/category"><span class="category"></span><strong>商品分类</strong></nuxt-link></li>
          <li><nuxt-link to="/cart"><span class="cart"></span><strong>购物车</strong></nuxt-link></li>
          <li><nuxt-link to="/member"><span class="mine"></span><strong>我的</strong></nuxt-link></li>
        </ul>
      </div>
    </transition>
  </i>
</template>

<script>
  export default {
    name: 'HeaderShortcut',
    data() {
      return {
        show: false
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  .icon-more {
    display: inline-block;
    position: relative;
    top: 5px;
    width: 20px;
    height: 20px;
    background: url("") no-repeat center;
    background-size: 100%;
  }
  .shortcut-mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
  }
  .shortcut-box {
    display: block;
    position: absolute;
    top: 30px;
    right: 0;
    z-index: 1000;
    border-radius: 4px;
    width: 125px;
    background: rgba(0,0,0,.9);
    text-align: left;
    &::before {
      position: absolute;
      top: -5px;
      right: 5px;
      width: 10.5px;
      height: 5px;
      background: url("") no-repeat 50%;
      background-size: 100% 100%;
      content: "";
    }
    li {
      display: block;
      position: relative;
      border-bottom: 1px solid hsla(0,0%,100%,.2);
      height: 40px;
      line-height: 40px;
      z-index: 1000;
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    a {
      display: block;
      border: 0;
      width: 100%;
      font-size: 14px;
      color: #fff;
      z-index: 1000;
      text-decoration: none;
    }
    span {
      position: absolute;
      top: 0;
      left: 0;
      width: 40px;
      height: 40px;
      &.home {
        background: url("") no-repeat center center;
        background-size: 15px;
      }
      &.category {
        background: url("") no-repeat center center;
        background-size: 15px;
      }
      &.cart {
        background: url("") no-repeat center center;
        background-size: 15px;
      }
      &.mine {
        background: url("") no-repeat center center;
        background-size: 15px;
      }
    }
    strong {
      font-weight: 700;
      font-size: 14px;
      margin-left: 40px;
    }
  }
  .shortcut-enter-active {
    transition: all .2s ease;
  }
  .shortcut-leave-active {
    transition: all .2s ease;
  }
  .shortcut-enter, .shortcut-leave-to {
    transform: translateY(10px);
    opacity: 0;
  }
</style>
